<template>
  <div class="right-top-panel">
    <!-- 1. 水球 -->
    <water-ball class="right-water-ball" :percentage="percentage"></water-ball>
    <!-- 2. 图例 -->
    <div class="legend">
      <template v-for="item in panelItems" :key="item">
        <div class="leg-name">
          <span :class="['dot', `area${item.id}`]"></span>
          <span class="name">{{ item.name }}</span>
          <span class="percentage">{{ item.percentage }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { number } from "echarts";
import { ref } from "vue";
import WaterBall from "./water-ball.vue";

const props = defineProps({
  percentage: {
    type: Number,
    default: 0
  },
  panelItems: {
    type: Array,
    default: function() {
      return []
    }
  }
}) 
</script>

<style scoped>
.right-top-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}


.right-top-panel .right-water-ball {
  width: 269px;
  height: 199px;
  margin-top: 50px;
  margin-left: 40px;
}

.right-top-panel .legend {
  flex: 1;
}
.right-top-panel .leg-name {
  margin-top: 23px;
  margin-left: 40px;
}
.right-top-panel .leg-name span {
  display: inline-block;
  font-size: 20px;
  margin-right: 11px;
}
.right-top-panel .legend .dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
}
.right-top-panel .legend .area1 {
  background-color: #209393;
}
.right-top-panel .legend .area2 {
  background-color: #1a54a5;
}
.right-top-panel .legend .area3 {
  background-color: #85caf0;
}
.right-top-panel .legend .area4 {
  background-color: #f5b64a;
}
.right-top-panel .legend .area5 {
  background-color: #ee792e;
}
.right-top-panel .legend .name {
  color: white;
}
.right-top-panel .legend .percentage {
  color: #0cd2ea;
}
</style>
